import Icon from '@/component/icon'
import { Popup, Tabs, Toast } from 'antd-mobile'

import { useinitstate } from '@/hooks'
import { getChanenlList } from '@/store/actions/channels'
import { useState } from 'react'
import Channels from './Channels'
import { changeActiveId } from '@/store/modules/channels'
import { useDispatch } from 'react-redux'
import ArticleList from './ArticleList/index'
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom'
const Home = () => {
  const nav = useNavigate()
  const dis = useDispatch()
  const [show, setShow] = useState(false)
  const { channels, activeId } = useinitstate(getChanenlList, 'channels')
  const changeChannel = async (id: string) => {
    await dis(changeActiveId(+id))
  }
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      {channels.length > 0 && (
        <Tabs
          activeKey={activeId + ''}
          onChange={changeChannel}
          className="tabs">
          {channels.map((item) => (
            <Tabs.Tab title={item.name} key={item.id}>
              <ArticleList channelId={item.id} />
            </Tabs.Tab>
          ))}
        </Tabs>
      )}
      {/* // 右上图 */}
      <div className="tabs-opration">
        <Icon
          iconName="iconbtn_search"
          onClick={() => {
            nav('/search')
          }}
        />
        <Icon
          iconName="iconbtn_channel"
          onClick={() => {
            setShow(true)
          }}
        />
      </div>
      <Popup className="channel-popup" visible={show} position="left">
        <Channels onClose={setShow}></Channels>
      </Popup>
    </div>
  )
}

export default Home
